<template>
    <view class="main">
        <view class="info-box">
            <!-- 要求 -->
            <view class="demand common">
                <view class="one dispaly-just-between">
                    <view class="one-left dispaly-center">
                        <view class="name">{{ jobDetailData?.job_name }}</view>
                        <!-- <view class="g-name dispaly-align-center">{{
                            jobDetailData?.central
                            }}</view> -->
                        <view class="g-name dispaly-align-center" v-if="jobDetailData?.is_state == 1">国企</view>
                        <view class="g-name dispaly-align-center" v-if="jobDetailData?.is_central == 1">央企</view>
                    </view>
                    <view class="one-right">{{ jobDetailData?.areas }}</view>
                </view>
                <view class="two">
                    <view class="tip dispaly-center">
                        <view class="tip-item" v-for="item in jobDetailData?.job_desc.split(',')" :key="item">{{ item }}
                        </view>
                    </view>
                </view>
                <view class="three dispaly-center">
                    <view class="title">招录人数</view>
                    <view class="desc">{{ jobDetailData?.person }}</view>
                </view>
                <view class="three dispaly-center">
                    <view class="title">招考单位</view>
                    <view class="desc">{{ jobDetailData?.company_name }}</view>
                </view>
            </view>

            <!-- 职位详情 -->
            <view class="info common">
                <view class="title-box dispaly-just-between">
                    <view class="title-left">职位信息</view>
                    <view class="title-right" @click="
                        navTo(`/subPackage/webView/webView?url=${jobDetailData?.link}`)
                        ">
                        查看原文链接 ></view>
                </view>
                <view class="item dispaly-center">
                    <view class="item-left">报考地区</view>
                    <view class="item-right">{{ jobDetailData?.areas }}</view>
                </view>
                <view class="item dispaly-center">
                    <view class="item-left">考试类型</view>
                    <view class="item-right">{{
                        jobDetailData?.exam_type == 1 ? "校招" : "社招"
                    }}</view>
                </view>
                <view class="item dispaly-center">
                    <view class="item-left">丁作单位</view>
                    <view class="item-right">{{ jobDetailData?.company_name }}</view>
                </view>
                <view class="item dispaly-center">
                    <view class="item-left">联系电话</view>
                    <view class="item-right">{{ jobDetailData?.link_data }}</view>
                </view>
                <view class="item dispaly-center">
                    <view class="item-left">职位名称</view>
                    <view class="item-right">{{ jobDetailData?.job_name }}</view>
                </view>
            </view>

            <!-- 历年真题 -->
            <!-- @click="navTo(`/subPackage/index/examPaper?id=${1}`)" -->
            <view class="topic common">
                <view class="title">历年真题</view>
                <view class="content">
                    <view v-if="jobDetailData?.history_sub">
                        <image v-if="
                            jobDetailData?.history_sub.split('.')[
                            jobDetailData?.history_sub.split('.').length - 1
                            ] == 'png' ||
                            jobDetailData?.history_sub.split('.')[
                            jobDetailData?.history_sub.split('.').length - 1
                            ] == 'jpg'
                        " :src="jobDetailData?.history_sub" mode="widthFix"
                            @click="detailPictureView(jobDetailData?.history_sub)" />
                        <view v-else @click="
                            navTo(
                                `/subPackage/webView/webView?url=${jobDetailData?.history_sub}`
                            )
                            ">{{ jobDetailData?.history_sub }}</view>
                    </view>
                    <view v-else>暂无</view>
                </view>
            </view>

            <!-- 岗位流程 -->
            <view class="info common topic">
                <view class="title-box dispaly-just-between">
                    <view class="title-left">岗位流程</view>
                    <!-- <view class="title-right" @click="navTo(`/subPackage/webView/webView?url=${jobDetailData?.link}`)">
                        查看详情 ></view> -->
                </view>
                <view class="picture content">
                    <view v-if="!jobDetailData?.flow">暂无</view>
                    <image v-else :src="jobDetailData?.flow" mode="widthFix" />
                </view>
            </view>

            <!-- 公示录取名单 -->
            <view class="topic common">
                <view class="title">公示录取名单</view>
                <view class="picture content">
                    <view v-if="!jobDetailData?.admit_list">暂无</view>
                    <image v-else :src="jobDetailData?.admit_list" mode="widthFix" />
                </view>
            </view>

            <!-- 最低录取分数 -->
            <view class="topic common">
                <view class="title">最低录取分数</view>
                <view class="content">
                    <view v-if="!jobDetailData?.admit_score">暂无</view>
                    <view v-else> {{ jobDetailData?.admit_score }}</view>
                </view>
            </view>

            <!-- 公司 -->
            <view class="com common">
                <view class="list-item dispaly-just-between">
                    <view class="left dispaly-center" @click="
                        navTo(
                            `/subPackage/doubleSelectionMeeting/unitDetail?id=${jobDetailData?.company_id}&name=${jobDetailData?.company_name}&logo=${jobDetailData?.company_logo}&areas=${jobDetailData?.areas}&is_care=${jobDetailData?.is_care}`
                        )
                        ">
                        <view class="cover">
                            <image :src="jobDetailData?.company_logo" />
                        </view>
                        <view>
                            <view class="title">{{ jobDetailData?.company_name }}</view>
                            <view class="tip dispaly-center">
                                <view class="tip-item" v-for="item in jobDetailData?.company_label.split(',')"
                                    :key="item">{{ item }}</view>
                            </view>
                        </view>
                    </view>
                    <view v-if="jobDetailData?.is_care == 0" class="w dispaly-align-center"
                        @click="care(jobDetailData?.company_id as number)">
                        关注
                    </view>
                    <view v-else class="g dispaly-align-center"
                        @click="cancenCare(jobDetailData?.company_id as number)">
                        已关注
                    </view>
                </view>
            </view>

            <!-- 评论 -->
            <view class="comment common">
                <view class="title">评论</view>
                <Empty v-if="!jobDetailData?.comments_list.length" text="暂无评论" />
                <view class="item" v-for="data in jobDetailData?.comments_list" :key="data.id">
                    <view class="user dispaly-center">
                        <view class="avatar" @click.stop="
                            navTo(`/subPackage/community/userDetail?id=${data.user_id}&is_care=${data.is_care}`)
                            ">
                            <image mode="aspectFill" :src="data.avatar" />
                        </view>
                        <view class="name">{{ data.nickname }}</view>
                    </view>
                    <view class="c-con">{{ data.content }}</view>
                    <view class="c-img dispaly-center" v-if="data.image.length">
                        <view class="img" v-for="(item, index) in data.image.split(';')" :key="item">
                            <image mode="aspectFill" :src="item" @click.stop="preview(data.image, index)" />
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <view class="option dispaly-just-between" v-if="!isComment">
        <view class="item-icon dispaly-col-center" @click="showPopup = true">
            <view class="icon">
                <image src="/static/icon/share.png" />
            </view>
            <view class="txt">分享</view>
        </view>
        <view class="item-icon dispaly-col-center" @click="postCollectJob" v-if="jobDetailData?.is_collect == 0">
            <view class="icon">
                <image src="/static/icon/sc.png" />
            </view>
            <view class="txt">收藏</view>
        </view>
        <view class="item-icon dispaly-col-center" @click="postCencelCollectJob" v-else>
            <view class="icon">
                <image src="/static/icon/ac.png" />
            </view>
            <view class="txt">已收藏</view>
        </view>
        <view class="btn dispaly-align-center comment-btn" @click="isComment = true">评论</view>
        <view class="btn dispaly-align-center td-btn">投递简历</view>
    </view>

    <Comment v-else />

    <Share :show-popup="showPopup" @close-pop="show => showPopup = show" />
    <!-- 分享弹窗 -->
    <!-- <tn-popup v-model="showPopup" open-direction="bottom">
        <view class="pop-main">
            <view class="title dispaly-align-center">分享到</view>
            <view class="item-box dispaly-just-between">
                <view class="item dispaly-col-center wx">
                    <button open-type="share" class="icon">
                        <image src="/static/icon/wx.png" />
                    </button>
                    <view class="name">微信</view>
                </view>
                <view @click="share(item)" class="item dispaly-col-center" v-for="item in shareData" :key="item.type">
                    <view class="icon">
                        <image :src="item.icon" />
                    </view>
                    <view class="name">{{ item.name }}</view>
                </view>
            </view>
            <view class="cancel dispaly-align-center" @click="showPopup = false">取消</view>
        </view>
    </tn-popup> -->
</template>

<script setup lang="ts">
import { navTo } from "@/utils/util";
import { ref, reactive } from "vue";
import Comment from "@/components/comment/comment.vue";
import { onShareAppMessage, onLoad } from "@dcloudio/uni-app";
import { getJobDetail, collectJob, cencelCollectJob } from "@/api/home/home";
import type { JobDetailType } from "@/types/responseData";
import type { RequestAddCareType } from "@/types/requstParm";
import { postAddCare, postCancelCare } from "@/utils/util";
import Share from "@/components/share/share.vue";


// 收藏职位
const postCollectJob = async () => {
    const res = await collectJob({ user_id: 2, job_id: jobDetailData.value?.id as number })
    if (res.code == 0) {
        uni.showToast({
            title: res.msg as string,
            icon: 'none'
        })
        jobDetailData.value!.is_collect = 1
    }
}

// 取消收藏职位
const postCencelCollectJob = async () => {
    const res = await cencelCollectJob({ user_id: 2, id: jobDetailData.value?.id as number })
    if (res.code == 0) {
        uni.showToast({
            title: res.msg as string,
            icon: 'none'
        })
        jobDetailData.value!.is_collect = 0
    }
}

// 添加关注
const formData = reactive<RequestAddCareType>({
    user_id: 2,
    relation_id: "",
    type: 2,
});

const care = async (id: number) => {
    formData.relation_id = id;
    const res = await postAddCare(formData);
    if (res == 'ok') {
        jobDetailData.value!.is_care = 1
    }
};

// 取消关注
const cancenCare = async (id: number) => {
    const res = await postCancelCare(id, 2)
    if (res == 'ok') {
        jobDetailData.value!.is_care = 0
    }
}


const jobId = ref<number>();
onLoad((option) => {
    jobId.value = option?.id;
    getJobDetailData();
});

// 获取职位详情
let jobDetailData = ref<JobDetailType>();
const getJobDetailData = async () => {
    const res = await getJobDetail({ id: jobId.value as number, user_id: 2 });
    if (res.code == 0) {
        jobDetailData.value = res.data;
    }
};

// 详情图片预览
const detailPictureView = (url: string) => {
    uni.previewImage({
        urls: [url],
        current: 0,
    });
};

const showPopup = ref<boolean>(false);

// 切换至评论
const isComment = ref<boolean>(false);

// 分享
onShareAppMessage(() => {
    return {
        title: jobDetailData.value?.job_name,
        path: `/subPackage/index/jobDetail?id=${jobDetailData.value?.id}`,
    };
});

// 图片预览
const preview = (image: string, index: number) => {
    uni.previewImage({
        urls: image.split(";"),
        current: index,
    });
};
</script>
<style lang="scss" scoped>
.common {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
}

.main {
    padding: 30rpx;

    .demand {
        .one {
            .one-left {
                .name {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: bold;
                    font-size: 32rpx;
                    color: #000000;
                    margin-right: 26rpx;
                }

                .g-name {
                    padding: 4rpx 8rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #a4a4a4;
                    background: #ffffff;
                    border-radius: 6rpx;
                    border: 1rpx solid #b8b8b8;
                }
            }

            .one-right {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #717171;
            }
        }

        .two {
            margin: 16rpx 0 31rpx 0;

            .tip {
                margin: 14rpx 0;

                .tip-item:last-child {
                    border-right: none;
                }

                .tip-item:first-child {
                    padding-left: 0;
                }

                .tip-item {
                    padding-right: 21rpx;
                    padding-left: 21rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #7e7e7e;
                    border-right: 1rpx solid #c1c1c1;
                }
            }
        }

        .three {
            .title {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #7e7e7e;
                margin-right: 26rpx;
            }

            .desc {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #000000;
            }
        }
    }

    .info {
        .title-box {
            margin-bottom: 35rpx;

            .title-left {
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 30rpx;
                color: #000000;
            }

            .title-right {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #008298;
            }
        }

        .item:last-child {
            margin-bottom: 0;
        }

        .item {
            margin-bottom: 22rpx;

            .item-left {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #7e7e7e;
                margin-right: 26rpx;
            }

            .item-right {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #000000;
            }
        }
    }

    .topic {
        .picture {
            image {
                width: 594rpx;
                height: 100%;
            }
        }

        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 30rpx;
            color: #000000;
            margin-bottom: 28rpx;
        }

        .content {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #7e7e7e;
            line-height: 50rpx;
        }
    }

    .com {
        .list-item {
            .g {
                width: 98rpx;
                height: 42rpx;
                background: #ffffff;
                border-radius: 21rpx;
                border: 2rpx solid #008298;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #008298;
            }

            .w {
                width: 98rpx;
                height: 42rpx;
                background: #008298;
                border-radius: 21rpx;
                border: 2rpx solid #008298;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #fff;
            }

            .left {
                .title {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: bold;
                    font-size: 26rpx;
                    color: #000000;
                }

                .cover {
                    margin-right: 14rpx;

                    image {
                        width: 81rpx;
                        height: 81rpx;
                        border-radius: 10rpx;
                    }
                }
            }

            .tip {
                margin: 14rpx 0;

                .tip-item:last-child {
                    border-right: none;
                }

                .tip-item:first-child {
                    padding-left: 0;
                }

                .tip-item {
                    padding-right: 21rpx;
                    padding-left: 21rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #7e7e7e;
                    border-right: 1rpx solid #c1c1c1;
                }
            }
        }
    }

    .comment {
        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 30rpx;
            color: #000000;
            margin-bottom: 43rpx;
        }

        .item:last-child {
            margin-bottom: 0;
        }

        .item {
            margin-bottom: 10rpx;

            .user {
                margin-bottom: 14rpx;

                .avatar {
                    margin-right: 11rpx;

                    image {
                        width: 57rpx;
                        height: 57rpx;
                        border-radius: 50%;
                    }
                }

                .name {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #000000;
                }
            }

            .c-con {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #7e7e7e;
                margin-bottom: 25rpx;
            }

            .c-img {
                flex-wrap: wrap;

                .img {
                    margin: 0 15rpx 15rpx 0;

                    image {
                        width: 196rpx;
                        height: 196rpx;
                        border-radius: 10rpx;
                    }
                }
            }
        }
    }
}

.info-box {
    padding-bottom: 184rpx;
}

.option {
    padding: 0 36rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 184rpx;
    background: #ffffff;
    box-shadow: inset 0rpx 1rpx 0rpx 1rpx rgba(0, 0, 0, 0.16);

    .btn {
        width: 248rpx;
        height: 84rpx;
        border-radius: 12rpx;
    }

    .comment-btn {
        border: 2rpx solid #008298;
        color: #008298;
    }

    .td-btn {
        background: #008298;
        color: #fff;
    }

    .item-icon {
        .icon {
            image {
                width: 36rpx;
                height: 36rpx;
            }
        }

        .txt {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: #7e7e7e;
        }
    }
}
</style>
